<template>
    <div>
        <x-header :left-options="{backText: ''}" class="ret">
            <div class="retTitle">点餐记录</div> 
        </x-header>

        <tab :line-width=4  v-model="tabindex">
            <tab-item class="vux-center" :selected="tabname === item" v-for="(item, tabindex) in tablist" 
            @click="tabname = item" :key="tabindex" @on-item-click="getOrder(tabindex)">{{item}}</tab-item>
        </tab>

        <div v-show="isShowNull" style="width:100%;display:block;text-align:center; padding-top:20px;color: #ccc;">
            您没点餐哦
        </div>
        <div v-show="isShowOrder">
            <group title="">
                <cell title="今天" s-link :border-intent="ture"
                    :arrow-direction="showContent1 ? 'up' : 'down'"
                    @click.native="showContent1 = !showContent1"></cell>
                <div class="slide" :class="showContent1?'animate':''" style="width:100%;display:block;text-align:center; padding-top:20px;color: #ccc;background-color:#fff">暂无记录</div>
                <cell title="本周" s-link :border-intent="false"
                    :arrow-direction="showContent2 ? 'up' : 'down'"
                    @click.native="showContent2 = !showContent2"></cell>
                <div class="slide" :class="showContent2?'animate':''" style="width:100%;display:block;text-align:center; padding-top:20px;color: #ccc;background-color:#fff">暂无记录</div>
                <cell title="本月" s-link :border-intent="false"
                    :arrow-direction="showContent3 ? 'up' : 'down'"
                    @click.native="showContent3 = !showContent3"></cell>
                <div class="slide" :class="showContent3?'animate':''" style="width:100%;display:block;text-align:center; padding-top:20px;color: #ccc;background-color:#fff">暂无记录</div>
                <cell title="今年" s-link :border-intent="false"
                    :arrow-direction="showContent4 ? 'up' : 'down'"
                    @click.native="showContent4 = !showContent4"></cell>
                <div class="slide" :class="showContent4?'animate':''" style="width:100%;display:block;text-align:center; padding-top:20px;color: #ccc;background-color:#fff">暂无记录</div>
            </group>
        </div>


    </div>
</template>

<script>
 import { XHeader, Tab, TabItem,Group,Cell,TransferDomDirective as TransferDom } from 'vux'
    export default {
        directives: {
            TransferDom
        },
        components: { XHeader, Tab, TabItem ,Group,Cell } ,
        data () {
            return { 
                tabindex: 0, 
                tablist: ['未下单', '已下单'],
                tabname: '未下单',
                isShowNull: true,
                isShowOrder: false,
                showContent1: false, 
                showContent2: false, 
                showContent3: false, 
                showContent4: false, 
            }
        },
        methods: {
            getOrder(){
                // console.log("tabindex :"+this.tabindex)
                if(this.tabindex == 0){
                    this.isShowNull = true;
                    this.isShowOrder = false;
                }else{
                    this.isShowNull = false;
                    this.isShowOrder = true;
                }
            }
        } 
    }
</script>

<style scoped lang="less">

.ret {
    background-color:#fff; 
 }
 .retTitle{
     color: #000;
     font-size: 14px;
 } 
 .slide {
  padding: 0 20px;
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
}
.animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}
</style>